﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Demo</title>
    <link href="https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/templates/bucket.css" rel="stylesheet" />
    <link href="https://cdn.bootcss.com/leaflet/1.5.0/leaflet.css" rel="stylesheet" />
    <style>
        html, body, #cesiumContainer {
            width: calc(100%);
            height: calc(100%);
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div id="cesiumContainer"></div>
    <script src="https://cesiumjs.org/Cesium/Build/CesiumUnminified/Cesium.js"></script>
    <script src="https://cdn.bootcss.com/leaflet/1.5.0/leaflet-src.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script>
        var viewer;
        $(function () {
            initMap();
            initWork();
        })
        function initMap() {
            viewer = new Cesium.Viewer('cesiumContainer', {
                imageryProvider:  new Cesium.UrlTemplateImageryProvider({
                    url: 'http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali',
                    tilingScheme: new Cesium.WebMercatorTilingScheme(),
                    minimumLevel: 1,
                    maximumLevel: 20,
                }),
                homeButton: true, // 是否显示home控件
                vrButton: false,
                fullscreenButton: true,
                animation: false, // 是否显示动画控件
                geocoder: false, // 是否显示地名查找控件
                timeline: false, // 是否显示时间线控件
                sceneModePicker: false, // 是否显示投影方式控件
                navigationHelpButton: false, // 是否显示帮助信息控件
                infoBox: false, // 是否显示点击要素之后显示的信息
                baseLayerPicker: true, // 是否显示图层选择控件
                selectionIndicator: false // Disable selection indicator
            })
            // 不显示三维信息
            viewer._cesiumWidget._creditContainer.style.display = 'none';
        }
        function initWork() {
            overMap.init(viewer);
        }
        var overMap = {
            init: function (viewer) {
                this.viewer = viewer,
                this.mapEle = window.document.createElement("div"),
                this.mapEle.setAttribute("id", "map2d"),
                this.mapEle.style.height = "150px",
                this.mapEle.style.width = "200px",
                this.mapEle.style.position = "absolute",
                this.mapEle.style.bottom = "30px",
                this.mapEle.style.right = "10px",
                document.body.appendChild(this.mapEle),
                this.showStyle = {
                    color: "#ff7800", weight: 1, fill: !0, stroke: !0, opacity: 1
                },
                this.hideStyle = { fill: !1, opacity: 0 },
                this.map = L.map('map2d', {
                    center: [31.827107, 117.240601],
                    zoom: 13,
                    zoomControl: false,
                    attributionControl: false
                }),
                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                }).addTo(this.map),
                this.viewer.scene.postRender.addEventListener(
                    this.sceneRenderHandler, this);
            },
            sceneRenderHandler: function (e) {
                var ext = getExtent(this.viewer),
                    i = L.latLng(ext.ymin, ext.xmin),
                    s = L.latLng(ext.ymax, ext.xmax),
                    bounds = L.latLngBounds(i, s);
                if (this.rectangle ? this.rectangle.setBounds(bounds) : this.rectangle = L.rectangle(bounds, this.showStyle).addTo(this.map), -180 == ext.xmin && 180 == ext.xmax && 90 == ext.ymax && -90 == ext.ymin) {
                    var center = getCenter(this.viewer);
                    this.map.setView([center.y, center.x], 0),
                    this.rectangle.setStyle(this.hideStyle)
                }
                else {
                    var oBounds = bounds.pad(.5);
                    this.map.fitBounds(oBounds),
                    this.rectangle.setStyle(this.showStyle)
                }
            },
            hide: function () {
                this.mapEle && (this.mapEle.style.display = "none")
            },
            show: function () {
                this.map && this.mapEle && (this.mapEle.style.display = "block")
            },
            setStyle: function (e) {
                e && (this.showStyle = e)
            },
            destroy: function () {
                this.mapEle && document.getElementsByTagName("body").removeChild(this.mapEle), this.viewer.scene.postRender.removeEventListener(this.sceneRenderHandler, this)
            }
        }
        function getExtent(viewer) {
            var rectangle = viewer.camera.computeViewRectangle(),
            result = getMinMax(rectangle);
            if (result.xmax < result.xmin) {
                var s = result.xmax;
                result.xmax = result.xmin,
                result.xmin = s
            }
            if (result.ymax < result.ymin) {
                var s = result.ymax;
                result.ymax = result.ymin,
                result.ymin = s
            }
            return result
        }
        function getMinMax(rectangle) {
            var t = Number(Cesium.Math.toDegrees(rectangle.west)).toFixed(6),
            i = Number(Cesium.Math.toDegrees(rectangle.east)).toFixed(6),
            n = Number(Cesium.Math.toDegrees(rectangle.north)).toFixed(6);
            return {
                xmin: t,
                xmax: i,
                ymin: Number(Cesium.Math.toDegrees(rectangle.south)).toFixed(6),
                ymax: n
            }
        }
        function getCenter(viewer) {
            var scene = viewer.scene,
            pos = getPos(scene),
            position = pos;
            if (!position) {
                var globe = scene.globe,
                cartographic = scene.camera.positionCartographic.clone(),
                height = globe.getHeight(cartographic);
                cartographic.height = height || 0,
                cartesian = Cesium.Ellipsoid.WGS84.cartographicToCartesian(cartographic)
            }
            var result = toCartographic(position);
            var d = Cesium.Cartesian3.distance(position, viewer.scene.camera.positionWC);
            return result.cameraZ = d,
            result
        }
        function getPos(scene) {
            var canvas = scene.canvas,
            center = new Cesium.Cartesian2(canvas.clientWidth / 2, canvas.clientHeight / 2),
            ray = scene.camera.getPickRay(center);
            return scene.globe.pick(ray, scene) || scene.camera.pickEllipsoid(center)
        }
        function toCartographic(cartesian) {
            var cartographic = Cesium.Cartographic.fromCartesian(cartesian),
            result = {};
            return result.y = Number(Cesium.Math.toDegrees(cartographic.latitude)).toFixed(6),
                result.x = Number(Cesium.Math.toDegrees(cartographic.longitude)).toFixed(6),
                result.z = Number(cartographic.height).toFixed(2),
                result
        }
    </script>
</body>
</html>
